// Credit

@import "common/sign";
@import "common/record";

.credit {
  &__basic {
    margin-top: 57px;
    margin-bottom: 1px;
    overflow: hidden;

    .tiles {
      float: left;
      width: 599px;
      height: 511px;

      + .tiles {
        margin-left: 2px;
      }

      &__basic {
        
        .tiles__body {
          padding-top: 42px;
          padding-right: 58px;
          padding-bottom: 60px;
        }

        .form-group {
          margin-left: 0;
          margin-right: 0;
          margin-bottom: 20px;
          overflow: hidden;

          &:last-child {
            margin-bottom: 0;
          }

          > .control-label {
            float: left;
            min-width: 96px;
            margin-right: 18px;
            padding-top: 10px;
            color: #6F6F6F;
            font-size: 16px;
            font-weight: 400;
            text-align: right;
          }

          > .control-inner {
            overflow: hidden;
          }
        }
      }

      &__credit {
        .header__inner {
          padding-top: 11px;
          padding-bottom: 11px;

          .credit-indicator {
            margin-left: 30px;
            vertical-align: baseline;
          }
        }

        .tiles__body {
          padding: 12px 72px 50px;
        }
      }
    }
  }

  &-indicator {
    display: inline-block;
    height: 34px;
    padding: 8px 28px 7px 48px;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 600;
    color: #415164;
    line-height: (19 / 14);
    background-color: #EDF0F2;
    background-position: left center;
    background-size: 34px;
    background-repeat: no-repeat;

    @each $name in success warning danger {
      &.#{$name} {
        background-image: url('~images/icons/credit-#{$name}.png');
      }
    }
  }

  &-dashboard {
    text-align: center;

    .dashboard__sector {
      height: 269px;
      margin-bottom: 39px;
      padding: 170px 50px 0;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url('~images/dashboard-green.png');
      font-size: 64px;
      font-weight: 600;
      color: #46D0AE;
      text-align: center;
      line-height: (85 / 64);

      .sector__main,
      .sector__foot {
        display: block;
        margin: 0;
        padding: 0;
      }

      .sector__foot {
        font-size: 12px;
        line-height: 1;
      }

      &.disabled {
        color: #EDECEC;
        background-image: url('~images/dashboard-grey.png');
      }
    }

    .dashboard__desc {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 16px;
      color: #B4B4B4;
      line-height: (21 / 16);
    }

    .dashboard__buttons {
      .btn {
        + .btn {
          margin-left: 40px;
        }
      }
    }
  }

  &__bank {
    margin-bottom: 20px;

    .tiles__body {
      padding: 13px 150px 65px;
    }

    .bank__inner {
      padding-left: 134px;
      padding-right: 200px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .bank-group {
      display: table;

      + .bank-group {
        margin-top: 22px;
      }

      > .form-control,
      > .addon {
        display: table-cell;
        padding-left: 8px;
        padding-right: 16px;
        white-space: nowrap;
      }

      > .form-control {
        width: 100%;
      }

      > .addon {
        width: 1%;
      }
    }
  }

  &__info {
    margin-bottom: 46px;

    .tiles__body {
      padding: 44px 100px 57px;
    }
  }

  &__app {
    .stepanel {
      margin-bottom: 40px;
    }

    .submission {
      padding: 65px 100px 50px;

      .stepanel__arrow {
        left: 320px;
      }

      &box {
        position: relative;
        width: 734px;
        margin: 0 auto 77px;
        padding: 40px 150px 60px;
        background-color: #DCDCDC;
        border: 1px solid #F1F1F1;

        &__label {
          float: left;
          margin: 0;
          padding-top: 16px;
          font-size: 18px;
          color: #444E5B;
          font-weight: 600;
        }

        &__input {
          height: auto;
          padding: 10px 20px;
          font-size: 30px;
          line-height: (40 / 30);
          overflow: hidden;
          color: #6897FF;
          font-weight: 600;
        }

        &__alert {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 6px;
          background-color: #FFFBE3;
          text-align: center;
          font-size: 14px;
          color: #F7BA5B;
          line-height: 1;

          .alert__close {
            position: absolute;
            right: 1px;
            top: 1px;

            > .icon {
              width: 12px;
              height: 12px;
            }
          }
        }
      }

      .linehead__notice {
        font-size: 14px;
        color: #FC6F43;
      }

      &__btn {
        margin-top: 75px;
        text-align: center;
      }
    }

    .audit .stepanel__arrow {
      left: 580px;
    }

    .sign {
      &__contract {
        margin-right: 82px;
      }

      &__validation {
        margin-left: 586px;
        padding-top: 0;

        .validation__head {
          margin-bottom: 25px;
          position: static;
          top: auto;
          left: auto;
          transform: none;
          white-space: nowrap;

          .number {
            line-height: (64 / 48);
            font-weight: 600;
          }

          .head__desc {
            text-align: left;
            line-height: (42 / 14);
          }
        }
      }
    }
  }
}